<template>
  <Container cla="structure-tree-layout-item" tabindex="1" @blur.native.prevent="itemBlurHandler">

    <div class="layout-item no-select"
         :class="{'active': layoutItem._highlight}"
         @click.stop="locationTargetLayoutItem"
         @mouseenter="itemMouseenterHandle"
         @mouseleave="itemMouseleaveHandle"
         v-contextmenu:layoutItemContextmenu>
      <div class="content clearfix" :style="{paddingLeft: belongGroupItem ? '10px':'0px'}">
        <div class="thumbnail">
          <img :src="thumbnailSrc(layoutItem.componentName)"/>
        </div>
        <div class="comp-desc">
          <span :title="layoutItem.layoutItemAliasName" @dblclick="nameDblclickHandler" style="cursor: pointer;">
            {{layoutItem.layoutItemAliasName ? $PnUtil.cutString(layoutItem.layoutItemAliasName, 9) : componentAliasName(layoutItem.componentName)}}
          </span>
        </div>
        <div class="toolbar">
          <a class="m-l-5px" href="javascript:;" v-if="alongShowTargetIdList.indexOf(layoutItem.layoutItemId) > -1"
             @click="$DesignerCommonUtil.toggleAlongShowLayout('layoutItems', [layoutItem.layoutItemId], 'cancel')">
            <Icon custom="iconfont icon-along-show"/>
          </a>
          <a class="m-l-5px" href="javascript:;" v-if="layoutItem.layoutItemDisplay == 'none'"
             @click="$DesignerCommonUtil.layoutItemShow([layoutItem.layoutItemId])">
            <Icon type="md-eye-off" />
          </a>
          <a class="m-l-5px" href="javascript:;" v-if="!layoutItem.layoutItemDraggable"
             @click="$DesignerCommonUtil.layoutItemUnLock([layoutItem.layoutItemId])">
            <Icon custom="iconfont iconlock"/>
          </a>
          <a class="m-l-5px" href="javascript:;" v-if="layoutItem.layoutItemIsStatic"
             @click="$DesignerCommonUtil.layoutItemNotStatic([layoutItem.layoutItemId])">
            <Icon type="md-remove-circle" size="14"/>
          </a>
        </div>
      </div>
    </div>

    <div v-if="renameEdit" class="rename-input" :style="{left: belongGroupItem ? '80px':'70px'}" @click.stop>
      <input v-focus v-model="formData.layoutItemAliasName"
             @focus="renameInputFocusHandler"
             @blur="renameInputBlurHandler"
             @keyup.enter="renameInputBlurHandler"/>
    </div>

    <v-contextmenu v-if="pageMetadata.develop_canvas == 'AbsoluteLayoutCanvas'" ref="layoutItemContextmenu">
      <v-contextmenu-item @click="layoutItemContextMenuClick('menu_setTop')"><Icon custom="iconfont iconvertical-align-top" /> 置顶</v-contextmenu-item>
      <v-contextmenu-item @click="layoutItemContextMenuClick('menu_setDown')"><Icon custom="iconfont iconvertical-align-botto" /> 置底</v-contextmenu-item>
      <v-contextmenu-item @click="layoutItemContextMenuClick('menu_setTopOne')"><Icon custom="iconfont icon-top-one" /> 上移一层</v-contextmenu-item>
      <v-contextmenu-item @click="layoutItemContextMenuClick('menu_setDownOne')"><Icon custom="iconfont icon-down-one" /> 下移一层</v-contextmenu-item>

      <v-contextmenu-item v-if="layoutItem.layoutItemDisplay == 'block'" @click="layoutItemContextMenuClick('menu_hide')"><Icon type="md-eye-off" size="14"/> 隐藏</v-contextmenu-item>
      <v-contextmenu-item v-else @click="layoutItemContextMenuClick('menu_show')"><Icon type="md-eye" size="14"/> 显示</v-contextmenu-item>
      <v-contextmenu-item v-if="layoutItem.layoutItemDraggable" @click="layoutItemContextMenuClick('menu_lock')"><Icon custom="iconfont iconlock" /> 锁定</v-contextmenu-item>
      <v-contextmenu-item v-else @click="layoutItemContextMenuClick('menu_unlock')"><Icon custom="iconfont iconunlock" /> 解锁</v-contextmenu-item>
      <v-contextmenu-item v-if="alongShowTargetIdList.indexOf(layoutItem.layoutItemId) < 0" @click="layoutItemContextMenuClick('menu_alongShowEnter')"><Icon custom="iconfont icon-along-show" /> 单独显示图层</v-contextmenu-item>
      <v-contextmenu-item v-else @click="layoutItemContextMenuClick('menu_alongShowCancel')"><Icon type="md-close-circle" size="14"/> 取消独立显示</v-contextmenu-item>
      <v-contextmenu-item divider></v-contextmenu-item>
      <v-contextmenu-item @click="layoutItemContextMenuClick('menu_rename')"><Icon type="md-create" size="15"/> 重命名</v-contextmenu-item>
      <v-contextmenu-item @click="layoutItemContextMenuClick('menu_createGroup')"><Icon custom="iconfont iconreferenceentitydefc" size="15" /> 组合</v-contextmenu-item>
      <v-contextmenu-item divider></v-contextmenu-item>
      <v-contextmenu-item @click="layoutItemContextMenuClick('menu_copyLayoutItem')"><Icon type="md-copy" size="15"/> 当前页复制</v-contextmenu-item>
      <v-contextmenu-item @click="layoutItemContextMenuClick('menu_crossPageCopyLayoutItem')"><Icon type="md-copy" size="15"/> 复制至剪切板</v-contextmenu-item>
      <v-contextmenu-submenu title="组件配置拷贝">
        <v-contextmenu-item @click="layoutItemContextMenuClick('menu_copyComponentConfigData')">复制关联组件的配置</v-contextmenu-item>
        <v-contextmenu-item @click="layoutItemContextMenuClick('menu_pasteComponentConfigData')">粘贴配置至关联组件</v-contextmenu-item>
      </v-contextmenu-submenu>
      <v-contextmenu-item divider></v-contextmenu-item>
      <v-contextmenu-item @click="layoutItemContextMenuClick('menu_delLayoutItem')"><Icon type="md-trash" size="15"/> 删除布局块</v-contextmenu-item>
    </v-contextmenu>

    <v-contextmenu v-if="pageMetadata.develop_canvas == 'ReactiveLayoutCanvas'" ref="layoutItemContextmenu">
      <v-contextmenu-item v-if="layoutItem.layoutItemDisplay == 'block'" @click="layoutItemContextMenuClick('menu_hide')"><Icon type="md-eye-off" size="14"/> 隐藏</v-contextmenu-item>
      <v-contextmenu-item v-else @click="layoutItemContextMenuClick('menu_show')"><Icon type="md-eye" size="14"/> 显示</v-contextmenu-item>
      <v-contextmenu-item v-if="layoutItem.layoutItemDraggable" @click="layoutItemContextMenuClick('menu_lock')"><Icon custom="iconfont iconlock" /> 锁定</v-contextmenu-item>
      <v-contextmenu-item v-else @click="layoutItemContextMenuClick('menu_unlock')"><Icon custom="iconfont iconunlock" /> 解锁</v-contextmenu-item>
      <v-contextmenu-item divider></v-contextmenu-item>
      <v-contextmenu-item @click="layoutItemContextMenuClick('menu_rename')"><Icon type="md-create" size="15"/> 重命名</v-contextmenu-item>
      <v-contextmenu-item divider></v-contextmenu-item>
      <v-contextmenu-item @click="layoutItemContextMenuClick('menu_delLayoutItem')"><Icon type="md-trash" size="15"/> 删除布局块</v-contextmenu-item>
    </v-contextmenu>

  </Container>

</template>

<script>

  import Vue from 'vue'

  // 右键菜单组件
  import contentmenu from 'v-contextmenu'
  import '../../../../assets/css/contextmenu.css'
  Vue.use(contentmenu);

  import _ from "lodash";

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getField',
    mutationType: 'designer/updateField',
  });

  export default {
    name: 'StructureTreeLayoutItem',
    props: {
      layoutItem: {
        type: Object,
        require: true
      },
      belongGroupItem: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        renameEdit: false,
        formData: {
          layoutItemAliasName: ''
        }
      }
    },
    mounted() {

    },
    methods: {

      locationTargetLayoutItem () {
        this.$refs.layoutItemContextmenu.hide();
        if (this.currentSelectLayoutItemId != this.layoutItem.layoutItemId) {
          this.$store.commit('designer/setCurrentSelectLayoutItemId', this.layoutItem.layoutItemId);

          this.$store.commit('designer/setRightSidebarFuncCompConfigFormName', 'NullForm');
          setTimeout(()=>{
            if (this.layoutItem.componentName) {
              this.$store.commit('designer/setRightSidebarFuncCompConfigFormName', this.layoutItem.componentName + 'Form');
            }
            this.$store.commit('designer/setCurrentSelectGroupItemId', '');
            this.$store.commit('designer/setCurrentSelectGroupItemIds', []);
          }, 50);
        }
        this.$emit('itemClick', {layoutItemId: this.layoutItem.layoutItemId, groupItemId: null});
      },

      nameDblclickHandler () {
        this.renameEdit = true;
        if (this.layoutItem.layoutItemAliasName) {
          this.formData.layoutItemAliasName = this.layoutItem.layoutItemAliasName
        }else {
          this.formData.layoutItemAliasName = this.componentAliasName(this.layoutItem.componentName)
        }
      },

      renameInputFocusHandler () {
        setTimeout(() => {
          $(document).unbind('keydown');
          $(document).unbind('keyup');
        }, 100)
      },

      renameInputBlurHandler () {
        this.$store.commit('designer/setLayoutItemAliasName', {
          id: this.layoutItem.layoutItemId,
          aliasName: this.formData.layoutItemAliasName
        });
        this.renameEdit = false;
        this.$EventBus.$emit('pn_closeStructureTreeRenameModal')
      },

      thumbnailSrc (componentName) {
        if (componentName) {
          try {
            return require('../../../../components/functional/' + JSON.parse(localStorage.getItem('allCompinfoObj'))[componentName].thumbnail_uri)
          }catch (e) {
            console.error('组件图片路径错误');
            return require('../../../../assets/image/thumbnail/thumbnail-default.png');
          }
        }else {
          return require('../../../../assets/image/thumbnail/thumbnail-default.png')
        }
      },

      componentAliasName (componentName) {
        if (componentName) {
          let str = JSON.parse(localStorage.getItem('allCompinfoObj'))[componentName].alias_name;
          if (str)
            return str;
          else
            return componentName
        }else {
          return "未绑定功能组件！"
        }
      },

      layoutItemContextMenuClick (name) {
        if (!this.currentSelectLayoutItemId && this.currentSelectLayoutItemIds.length == 0) {
          this.$Message.error('并未选中任何布局块');
          return
        }

        let layoutItemIds = _.compact(_.union([this.currentSelectLayoutItemId], this.currentSelectLayoutItemIds.concat()));

        switch (name) {
          case 'menu_hide':
            this.$DesignerCommonUtil.layoutItemHide(layoutItemIds);
            break;
          case 'menu_show':
            this.$DesignerCommonUtil.layoutItemShow(layoutItemIds);
            break;
          case 'menu_lock':
            this.$DesignerCommonUtil.layoutItemLock(layoutItemIds);
            break;
          case 'menu_unlock':
            this.$DesignerCommonUtil.layoutItemUnLock(layoutItemIds);
            break;
          case 'menu_alongShowEnter':
            this.$DesignerCommonUtil.toggleAlongShowLayout('layoutItems', layoutItemIds, 'enter')
            break;
          case 'menu_alongShowCancel':
            this.$DesignerCommonUtil.toggleAlongShowLayout('layoutItems', layoutItemIds, 'cancel')
            break;
          case 'menu_createGroup':
            this.$DesignerCommonUtil.layoutItemCreateGroup(this.layoutGroup, layoutItemIds);
            break;
          case 'menu_copyLayoutItem':
            this.$DesignerCommonUtil.layoutItemCopy(layoutItemIds);
            break;
          case 'menu_crossPageCopyLayoutItem':
            this.$DesignerCommonUtil.layoutItemCopyToPage(layoutItemIds)
            break;
          case 'menu_copyComponentConfigData':
            this.$DesignerCommonUtil.copyComponentConfigData(this.currentSelectLayoutItemId)
            break;
          case 'menu_pasteComponentConfigData':
            this.$DesignerCommonUtil.pasteComponentConfigData(layoutItemIds)
            break;
          case 'menu_setTop':
            this.$DesignerCommonUtil.layoutItemSetTop(layoutItemIds);
            break;
          case 'menu_setDown':
            this.$DesignerCommonUtil.layoutItemSetDown(layoutItemIds);
            break;
          case 'menu_setTopOne':
            this.$DesignerCommonUtil.layoutItemSetTopOne(layoutItemIds);
            break;
          case 'menu_setDownOne':
            this.$DesignerCommonUtil.layoutItemSetDownOne(layoutItemIds);
            break;
          case 'menu_rename':
            this.nameDblclickHandler();
            break;
          case 'menu_delLayoutItem':
            this.$DesignerCommonUtil.layoutItemDelete(layoutItemIds);
            break;
        }

      },

      itemMouseenterHandle () {
        this.$store.commit('designer/setCurrentHoverLayoutItemId', this.layoutItem.layoutItemId)
      },

      itemMouseleaveHandle () {
        this.$store.commit('designer/setCurrentHoverLayoutItemId', '')
      },

      itemBlurHandler () {
        if (this.$refs.layoutItemContextmenu) {
          setTimeout(() => {
            this.$refs.layoutItemContextmenu.hide()
          }, 300)
        }
      }

    },
    computed: {
      ...mapFields({
        pageMetadata: 'pageMetadata',
        layoutGroup: 'pageMetadata.layout.layoutGroup',
        currentSelectLayoutItemId: 'currentSelectLayoutItemId',
        currentSelectLayoutItemIds: 'currentSelectLayoutItemIds',
        alongShowTargetIdList: 'alongShowTargetIdList'
      }),
    }
  }
</script>

<style lang="less" scoped>

  input {
    background-color: #1D2127;
    color: #fff;
  }

  .structure-tree-layout-item {
    position: relative;
    .rename-input {
      position: absolute;
      top: 14px;
      left: 70px;
      z-index: 999;
      input {
        width: 140px;
      }
    }
    &:focus {
      outline: 0;
    }
  }

  .layout-item {
    width: 100%;
    height: auto;
    &:hover {
      background-color: #757575;
    }
    &.active {
      .content {
        background-color: #0091ea;
      }
    }
    .content {
      position: relative;
      .thumbnail {
        float: left;
        padding: 8px;
        line-height: 0;
        img {
          width: 55px;
          height: 35px;
          border: 1px solid #757575;
        }
      }
      .comp-desc {
        float: left;
        padding: 15px 5px 5px 0px;
        color: #fff;
      }
      .toolbar {
        width: auto;
        position: absolute;
        right: 5px;
        bottom: 0px;
        a {
          font-size: 13px;
          color: #fff;
        }
      }
    }
  }

</style>
